<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item" required label="提交人"><u-input disabled v-model="form.createName" type="text" placeholder="请输入提交人" /></u-form-item>
				<u-form-item class="form-item" required label="手机号" prop="phone"><u-input v-model="form.phone" type="number" placeholder="请输入手机号" /></u-form-item>
				<u-form-item class="form-item" required label="验证码" v-if="phone != form.phone">
					<u-input v-model="form.smsCode" type="number" placeholder="请输入验证码" />
					<template v-slot:right>
						<u-button class="code" type="error" size="mini" @click="getCode">{{ codeTips }}</u-button>
					</template>
					<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				</u-form-item>
				<block v-if="form.sendTo == 2">
					<u-form-item class="form-item" label="联络站">
						<u-input v-model="llzName" type="select" :select-open="llzShow" placeholder="请选择联络站" @click="llzShow = true" />
						<select-tree ref="llzTree" :show="llzShow" :range="llzList" rangeKey="stationName" :selected="llzStr" :multiple="false" @confirm="treeConfirm($event, 'llz')" @cancel="treeCancel($event, 'llz')"></select-tree>
					</u-form-item>
				</block>
				<block v-else>
					<u-form-item class="form-item" label="联络站">
						<view class="form-right">{{ llzName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="代表">
						<u-input v-model="dbName" type="select" :select-open="dbShow" placeholder="请选择代表" @click="dbShow = true" />
						<select-tree ref="dbTree" :show="dbShow" :range="dbList" idKey="userId" rangeKey="userName" :selected="dbStr" :multiple="false" @confirm="treeConfirm($event, 'db')" @cancel="treeCancel($event, 'db')"></select-tree>
					</u-form-item>
				</block>

				<u-form-item class="form-item" label="发生地点">
					<!-- <view class="text" @click="chooseLocation">{{ form.address }}</view> -->
					<u-input v-model="form.address" @click="chooseLocation" disabled type="text" placeholder="请选择发生地点" />
				</u-form-item>
				<u-form-item class="form-item" label="详细地址" v-if="form.address"><u-input v-model="form.address2" type="text" placeholder="请输入详细地址" /></u-form-item>

				<!-- <u-form-item class="form-item" label="二维码">
					<view class="form-right" @click="siteTo()">
						保存后，可扫码提交问题
						<image class="image" src="/static/img/er.png" mode="widthFix"></image>
					</view>
				</u-form-item> -->
				<u-form-item class="form-item" required label=" " label-width="0" prop="opinionDescribe">
					<u-input input-align="left" v-model="form.opinionDescribe" type="textarea" placeholder="请输入正文内容" :clearable="false" :height="160" :maxlength="-1" />
				</u-form-item>

				<!-- <view class="ocr-box">
					<view class="ocr" @click="ocrTo('image', 'opinionDescribe')">
						<image src="/static/img/icon_90.png" mode="widthFix"></image>
						<view>图片识别</view>
					</view>
					<view class="ocr" @click="ocrTo('audio', 'opinionDescribe')">
						<image src="/static/img/icon_91.png" mode="widthFix"></image>
						<view>文字识别</view>
					</view>
				</view> -->

				<!-- <u-form-item class="form-item" label="提交日期"><u-input v-model="timer" type="text" placeholder="提交日期" /></u-form-item> -->

				<u-form-item class="form-item" label=" " label-width="0">
					<uni-file-upload width="690rpx" type="image" :limit="10"><view class="node">上传图片，不超过10张</view></uni-file-upload>
				</u-form-item>
				<u-form-item class="form-item" label=" " label-width="0">
					<uni-file-upload width="690rpx" type="audio" :limit="1"><view class="node" style="margin-top: 0">上传录音</view></uni-file-upload>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
			<!-- <view class="flex-box">
				<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
				<u-button class="form-btn" type="success" @click="spare">草稿</u-button>
			</view> -->
		</view>

		<view class="popup-box" v-if="pShow">
			<view class="popup-flex">
				<scroll-view scroll-y="true" class="m-box">
					<view class="h2">提交须知</view>
					<view class="summon">
						<view class="p">一、选民群众可以围绕全区改革、发展、稳定大局和人民群众普遍关心的问题，实事求是地向人大代表反映您的建议、意见。如城市建管、营商环境、教育教学、医疗保障、就业创业、社会保险、治安治理、物业管理、养老服务、交通出行等。</view>
						<view class="p">
							二、下列情况不应当向人大代表反映：
							<view>(1)涉及申诉、控告、检举的；</view>
							<view>(2)属于学术探讨、产品推介的；</view>
							<view>(3)没有具体内容的；</view>
							<view>(4)违反有关法律法规的；</view>
							<view>(5)属于信访类的；</view>
							<view>(6)其他不适宜向人大代表提出的事项。</view>
						</view>
						<view class="p">三、人民群众向代表留言，应当留下联系方式，便于联系反馈。</view>
						<view class="p">四、人大代表收到人民群众留言后，应当按照有关法律法规的规定进行处理。</view>
					</view>
				</scroll-view>

				<view class="fiexd-btm">
					<view class="flex-box">
						<u-button class="form-btn" @click="back">取消</u-button>
						<u-button class="form-btn" v-if="!agree" type="error" disabled @click="agree = true">已阅读({{ count }}s)</u-button>
						<u-button class="form-btn" v-else type="error" @click="pShow = false">已阅读并同意</u-button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="false && willClue"></view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		dateTimePicker,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '问题提报',
			typeA: '',
			userName: '',
			phone: '',
			count: 3,
			ocrKey: '',
			disabled: false,
			pShow: true,
			agree: false,
			codeTips: '获取验证码',
			content: ``,

			timer: '',

			type: '',
			typeShow: false,
			typeList: [],

			llzIds: [],
			llzName: '',
			llzShow: false,
			llzList: [],
			llzStr: '',

			dbIds: [],
			dbName: '',
			dbShow: false,
			dbList: [],
			dbStr: '',

			dictType: '',
			form: {
				id: null,
				title: null,
				type: null,
				opinionType: null,
				createName: null,
				address: '',
				address2: '',
				phone: null,
				smsCode: null,
				stationId: null,
				representiveId: null,
				sendTo: 2,
				clientCode: null,
				opinionDescribe: null
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: '请选择问题类型',
						trigger: 'change'
					}
				],
				address: [
					{
						required: true,
						message: '请选择地址',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				smsCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				],
				opinionDescribe: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: 'change'
					}
				]
			},
			willClue: {
				adoptUser: '',
				clientCode: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		if (option && option.id) {
			this.id = option.id;
			if (option.type == 'clue') {
				this.typeA = 'clue';
				this.form.sendTo = option.id;
				this.clueData();
			} else if (option.type == 'spare') {
				this.title = '修改问题';
				this.typeA = 'spare';
				this.spareData();
			}
		}

		if (option && option.sendTo) {
			this.form.sendTo = option.sendTo;
		}
		if (option && option.stationId) {
			this.form.stationId = option.stationId;
		}
		if (option && option.representiveId) {
			this.form.representiveId = option.representiveId;
		}

		this.loadDict('mqzt_type', 'typeList');
		this.loadSite();
		this.loadTeam();

		uni.setNavigationBarTitle({
			title: this.title
		});

		this.countdown();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.phone = this.userInfo.sysUser.phone;
				this.form.createName = this.userInfo.sysUser.userName;
				this.form.phone = this.userInfo.sysUser.phone;
			} else {
				this.$logout();
			}
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getCode() {
			let data = {
				clientCode: this.clientCode
			};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.phone, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		countdown(e) {
			setTimeout(() => {
				if (this.count > 0) {
					this.count--;
					this.countdown();
				} else {
					this.agree = true;
				}
			}, 1000);
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}

			this[type + 'Ids'] = [];
			if (e.length > 0) {
				if (type == 'db') {
					this[type + 'Ids'].push(e[0].userId);
					this[type + 'Name'] = e[0].userName;
				} else {
					this[type + 'Ids'].push(e[0].id);
					this[type + 'Name'] = e[0].stationName;
				}
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		checkboxGroupChange(e) {
			this.reflectUserIdentity = e;
			this.form.reflectUserIdentity = e.join(',');
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.form.opinionType = e[0].value;
		},
		typeGroupChange(e) {
			this.type = e;
			this.form.type = e;
			this.form.opinionType = e;
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						name: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		spareData() {
			this.$request('/minqingzhitong/msPublicOpinion/get', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				// Object.assign(this.form, res.data.msPublicOpinion);
				Object.keys(this.form).forEach((key) => (this.form[key] = res.data.msPublicOpinion[key]));
				this.$store.commit('filePush', res.data.fileList);

				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.msPublicOpinion.opinionDescribe) {
					this.form.opinionDescribe = res.data.msPublicOpinion.opinionDescribe.replace(regx, '');
				}

				if (res.data.opinionDescribe.stationName) {
					this.llzIds = [];
					this.llzIds.push(res.data.stationId);
					this.llzStr = this.llzIds.join(',');
					this.llzName = res.data.stationName;
				}
			});
		},
		loadSite() {
			this.$request('/minqingzhitong/msLiaisonStation/list', {
				pageNum: 1,
				pageSize: 9999,
				stationFlag: '',
				contacts: '',
				street: '',
				stationName: ''
			}).then((res) => {
				if (res.data) {
					this.llzList = res.data;

					if (this.form.stationId) {
						this.llzIds = [];
						this.llzList.forEach((item) => {
							if (item.id == this.form.stationId) {
								this.llzIds.push(this.form.stationId);
								this.llzStr = this.llzIds.join(',');
								this.llzName = item.stationName;
							}
						});
					}
				}
			});
		},
		loadTeam() {
			let data = {
				id: this.form.stationId
			};
			let url = '/minqingzhitong/msLiaisonStation/get';

			this.$request(url, data).then((res) => {
				if (res.data) {
					this.dbList = res.data.msStationEmployees;

					if (this.form.representiveId) {
						this.dbIds = [];
						this.dbList.forEach((item) => {
							if (item.userId == this.form.representiveId) {
								this.dbIds.push(this.form.representiveId);
								this.dbStr = this.dbIds.join(',');
								this.dbName = item.userName;
							}
						});
					}
				}
			});
		},
		onEditorReady(edit) {
			this.$refs.editor
				.context((res) => {
					this[edit] = res.context;
				})
				.exec();
		},
		spare() {
			this.form.nodeStatus = '0';
			this.confirm();
		},
		ocr(key) {
			this.ocrKey = key;
		},
		ocrTo(e, key) {
			this.ocrKey = key;
			uni.navigateTo({
				url: '/pagesB/ocr/index?ocrKey=' + this.ocrKey + '&type=' + e
			});
		},
		chooseLocation(e) {
			uni.getLocation({
				type: 'gcj02',
				success: (result) => {
					uni.chooseLocation({
						longitude: result.longitude,
						latitude: result.latitude, //纬度
						success: (res) => {
							this.form.address = res.address;
						}
					});
				}
			});
		},
		siteTo(e) {
			if (this.llzIds.length == 0) {
				this.$msg('请选择联络站');
				return false;
			}
			uni.navigateTo({
				url: '/pagesB/will/app?id=' + this.llzIds[0] + '&name=' + this.llzName
			});
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		back(e) {
			uni.navigateBack({});
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					console.log('验证失败');
					return false;
				} else {
					let data = {};
					this.form.clientCode = this.clientCode;
					this.form.createBy = this.userId;

					this.form.address = this.form.address + this.form.address2;

					if (this.phone != this.form.phone && !this.form.smsCode) {
						this.$msg('请输入验证码');
						return false;
					}

					data = {
						...this.form,
						representiveId: this.dbIds.join(','),
						stationId: this.llzIds.join(','),
						fileList: this.fileList
					};

					let url = '/minqingzhitong/msPublicOpinion/save';
					this.$request(url, data, {
						load: true
					}).then((res) => {
						this.$msg(res.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.popup-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	padding: 30rpx;
	background-color: #fff;

	.h2 {
		margin-bottom: 26rpx;
		font-size: 18px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
		text-align: center;
	}

	.summon {
		white-space: pre-wrap;
		font-size: 17px;
		line-height: 54rpx;

		.p {
			margin-bottom: 1em;
		}
	}
}

.popup-flex {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.m-box {
	flex-wrap: nowrap;
	flex: 1;
	height: 0;
}

.node {
	margin: 20rpx 0 0 20rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 120rpx;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid #f5f7fa;
	}

	.form-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		text-align: right;

		.image {
			margin-left: 20rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.code {
		padding: 0 16rpx;
		color: #d0021b;
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
